<template>

	<view class="main">
		<image class="ysaimg" style="width: 100%;height: 100vh;position: fixed;top: 0;" src="/static/images/kszx.png"></image>

		<u-navbar :bgColor="bgColor" :fixed="false" title="快速咨询" :placeholder="true" @rightClick="rightClick" :autoBack="true"></u-navbar>

		<view class="ysjs">
			<view>
				<view class="row_a_c">
					<view class="name">1V1</view>
					<view class="nameb">专属口腔咨询</view>
				</view>
				<view class="zhiwu">一站式解决口腔问题，体验定制化服务</view>
			</view>
			<image class="ys" src="/static/images/ys.png"></image>
		</view>

		<view class="infot">

			<view class="info column_c">
				<view class="column_c">
					<view class="title1">长按保存二维码 添加服务官</view>
					<view class="title2">立马获取 免费检查和内部优惠</view>
				</view>
				<image class="jtt " src="/static/images/jtt.png"></image>
				<view class="kkk center">
					<image class="ewm " :src="image"></image>
				</view>
			</view>
			<view class="infob column_c">


				<view class="row_a_c">
					<view class="xiana"></view>
					<view class="zzzjjj">您的口腔管理专家</view>
					<view class="xinab"></view>
				</view>

				<view style="margin-top: 50rpx;width:80%;" class="row_a_c space-between">

					<view class="column">
						<image class="bbb " src="/static/images/xmbj.png"></image>
						<view class="xmbj">项目报价</view>
					</view>

					<view class="column">
						<image class="bbb " src="/static/images/dhdd.png"></image>
						<view class="xmbj">导航到店</view>
					</view>

					<view class="column">
						<image class="bbb " src="/static/images/tqyy.png"></image>
						<view class="xmbj">提前预约</view>
					</view>

				</view>

			</view>


		</view>


	</view>


	</view>

</template>

<script>
	import api_index from '@/api/index.js';

	export default {
		components: {

		},
		async onLoad(option) {
			console.log(uni.$u.config.v);
		},

		async onShow() {
			this.getServiceCodeFuc();
		},

		data() {
			return {
				bgColor: 'rgba(0, 31, 63, 0)',
				image: null,
				keyword: null,
				list1: [
					'/static/images/ysa.png',
				],
			};
		},
		methods: {
			//获取客服二维码
			async getServiceCodeFuc() {
				const res = await api_index.getServiceCode();
				if (res.code == 1) {
					// const jsonObject = JSON.parse(res.data);
					this.image = res.data.image;
				} else {
					this.$util.msg(res.message);
					return;
				}
			},
		}
	};
</script>

<style scoped lang="scss">
	.main {}

	.ysjs {
		position: absolute;
		top: 230rpx;
		left: 62rpx;

	}

	.name {
		font-weight: 700;
		font-size: 56rpx;
		line-height: 48rpx;
		margin-right: 16rpx;
	}

	.nameb {
		font-weight: 700;
		font-size: 44rpx;
		color: #115850;
	}

	.zhiwu {
		font-weight: 400;
		font-size: 24rpx;
		color: #17766C;
		margin-top: 28rpx;
	}

	.xiana {
		width: 80rpx;
		height: 4rpx;
		background: linear-gradient(90deg, rgba(17, 88, 80, 0.8) 0%, rgba(17, 88, 80, 0) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin-right: 10rpx;
	}

	.xinab {
		width: 80rpx;
		height: 4rpx;
		background: linear-gradient(270deg, rgba(17, 88, 80, 0.8) 0%, rgba(17, 88, 80, 0) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin-left: 10rpx;
	}


	.zzzjjj {
		font-weight: 400;
		font-size: 28rpx;
		color: #115850;
	}

	.bbb {
		width: 120rpx;
		height: 116rpx;
	}

	.xmbj {

		font-weight: 400;
		font-size: 28rpx;
		color: #485E92;

	}


	.ys {
		width: 322rpx;
		height: 510rpx;

		position: absolute;
		top: -80rpx;
		left: 365rpx;
	}



	.pf {
		font-weight: 400;
		font-size: 20rpx;
		color: rgba(0, 0, 0, 0.4);
		margin-right: 10rpx;
	}

	.ff {

		font-weight: 500;
		font-size: 32rpx;
		color: #F69739;



	}




	.zc {
		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.6);
		margin-bottom: 24rpx;
	}

	.infot {
		position: absolute;
		top: 540rpx;
		left: 32rpx;
		width: 686rpx;
	}

	.info {

		min-height: 742rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 32rpx;
		margin-bottom: 30rpx;
	}

	.xian {
		width: 8rpx;
		height: 32rpx;
		background: linear-gradient(180deg, #EBF6F6 0%, #27CCBB 100%);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-right: 16rpx;
	}

	.title1 {
		font-weight: 500;
		font-size: 32rpx;
		color: #115850;
		margin-top: 48rpx;
	}

	.title2 {
		font-weight: 400;
		font-size: 24rpx;
		color: #17766C;
		margin-top: 12rpx;
	}

	.jtt {
		width: 100rpx;
		height: 54rpx;
		margin: 20rpx 0;



	}


	.kkk {
		width: 360rpx;
		height: 360rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		border: 6rpx solid #CDF1EC;
	}

	.ewm {
		width: 600rpx;
		height: 600rpx;
	}

	.infowz {
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.85);
		margin-top: 32rpx;
	}

	.infob {
		min-height: 350rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 32rpx;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
	}

	.grjj {
		margin-top: 32rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.6);
	}
</style>